<template>
    <div class="step3">
        <div class="info-back search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="back-icon" @click="back()">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="selected-result" style="padding-top: 65px">
            <div class="clearfix">
                <span class="selected-title">商品</span>
                <!--<span class="change" @click="changeGood">(点击更换商品)</span>-->
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content pd">
                            <img v-if="backInfo.item.goodsPicturesName" :src="static_url + backInfo.item.goodsPicturesName">
                            <img v-else src="../../../../static/img/goods.png">
                        </div>
                    </el-col>

                    <el-col :span="15">
                        <div class="grid-content text">
                            <h6>{{ backInfo.item.name}}</h6>
                            <p class="l2">{{ backInfo.item.remark }}</p>
                            <span>原价：{{ Number(backInfo.item.goodsprice).toFixed(2) }}</span>
                            <span>会员价：<span class="member-price">{{ Number(backInfo.item.memberPrice).toFixed(2)  }}</span></span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content account">
                            <span>数量：{{backInfo.item.quantity}}</span>
                            <!--<el-input-number v-model="num" :min="1"  @change="count"></el-input-number>-->
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="selected-result">
            <div class="clearfix">
                <span class="selected-title">会员</span>
                <!--<span class="change" @click="changeMember">(点击更换会员)</span>-->
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3" class="text-center"  v-if="!backInfo.id">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img"  @click="changeMember">
                                <img src="../../../../static/img/member.png">
                                <!--<i class="icon-plus-circle" style="font-size: 60px;color: #999"></i>-->
                            </div>
                            <div class="grid-content text pt10">
                                <span>暂无会员</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-center" v-if="backInfo.id">
                        <div class="info-img">
                            <img v-if="portraitName" :src="static_url + portraitName">
                            <img v-else src="../../../../static/img/member.png">

                        </div>
                        <div  class="grid-content text pt10" style="width: 90px">
                            <span>{{backInfo.name}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="selected-result">
            <div class="clearfix">
                <span class="selected-title">员工</span>
                <!--<span class="change" @click="changeEmployee">(点击更换员工)</span>-->
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3" class="text-center" v-for="emp in goodItem.handlers" >
                        <div class="info-img">
                            <img v-if="emp.handlerPicture" :src="static_url + emp.handlerPicture">
                            <img v-else src="../../../../static/img/member.png">
                        </div>
                        <div class="grid-content text pt10" style="width: 90px">
                            <span v-if="(emp.handlerName).length > 6">
                              {{emp.handlerName.slice(0, 6) + "..."}}
                            </span>
                            <span v-else>
                              {{emp.handlerName}}
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-center" v-if="hasHandler">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img">
                                <img  src="../../../../static/img/member.png">
                                <!--<i class="icon-plus-circle" style="font-size: 60px;color: #999"></i>-->
                            </div>
                            <div class="grid-content text pt10">
                                <span>暂无员工</span>
                            </div>
                        </div>

                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import * as type from '../../../store/types';
    import vMember from './Member.vue';
    export default {
        name: "keepailve-false",
        data: function () {
            return {
                backInfo:'',
                goodItem:[],
                portraitName:'',
                static_url: this.$cfg.static_url + "/",
                hasHandler:false
            }
        },

        created: function () {
            this.backInfo =this.$route.params;
            this.getInfo();
        },
        methods: {
            getInfo(){
                let self = this;
                this.$axioxs.get('/user/' + this.backInfo.memberId)
                    .then(function (res) {
                        console.log(res.data)
                        self.portraitName =res.data.portraitName;
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.$message({
                            showClose: true,
                            type: 'error',
                            message: error,
                            onClose:function () {
                                self.loading = false;
                            }
                        });
                    });
                this.$axioxs.get('/sale/getEntry/' + this.backInfo.item.id)
                    .then(function (res) {
                        console.log(res.data)
                        self.goodItem =res.data;
                        var hasHandler =self.goodItem.handlers;
                        console.log('=====')
                        console.log(hasHandler)
                        if(hasHandler.length>=1){
                            self.hasHandler =false;
                        }else{
                            self.hasHandler =true;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.$message({
                            showClose: true,
                            type: 'error',
                            message: error,
                            onClose:function () {
                                self.loading = false;
                            }
                        });
                    });
            },
            back: function () {
                this.$store.commit(type.CHANGE_INDEX, '/unpaid/settlement');
                console.log(22222222)
                console.log(this.backInfo)
                var backItem =this.$route.params;
                console.log(this.$route.params.backItem)
                this.$router.push({
                    name: 'unpaid',
                    path: '/unpaid/settlement',
                    params: {
                        item: backItem.backItem,
                        id: backItem.id,
                        name: backItem.name,
                        memberId: backItem.memberId,
                        isPayState: backItem.isPayState,
                        sn: backItem.sn,
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .step3 .btns{
        width: 65%;
    }
    .el-select .el-input {
        width: 150px !important;
    }

    .el-form-item {
        margin-top: 10px;
    }
    .payment .el-input{
        width: 150px !important;
    }
    .img{
        overflow: hidden;
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }
    .img img{
        border-radius: 50%;
    }

    .line .step-item .step-description{
        left: -15px;
        padding-top: 10px;
    }

    .step-header{
        padding-left: 60px;
    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
    }
    .list-bottom-span{
        color: #fff;
    }
    .num-bottom-input{
        width: 14%;
    }
    .num-bottom-select{
        width: 14%;
    }
    .info-img{
        width: 75px;
        height: 75px;
        margin: 5px auto;
    }
    .info-img img{
        width: 100%;
        height:100%;
    }
</style>
